<template>
    <div class="couponlist-wrap">
       
        <wxc-minibar title="我的优惠券"> </wxc-minibar>

        <wxc-tab-page ref="wxc-tab-page" :tab-titles="tabTitles" title-type="text" :tab-styles="tabStyles" :tab-page-height="tabPageHeight" @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
            <list v-for="(v,index) in tabList" :key="index" class="item-container" :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
                <refresh @refresh="onrefresh" class="refresh" :display="refreshing ? 'show' : 'hide'">
                    <!-- <text style="font-size:28px;">数据加载中。。。</text>
                    <loading-indicator class="indicator"></loading-indicator> -->
                    <rotate></rotate>
                </refresh>
                <cell v-for="(item,key) in v" v-if="v&&v.length>0" class="cell" :key="key">
                  
                    <div class="coupon-itemWrap">
                        <div class="counpon-item">
                            <div class="item-left" >
                                <image v-if="index==0" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/couponBg.png" class="item-bg"></image>
                                <image  v-if="index>0" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/couponBgh.png" class="item-bg"></image>
                                <div class="itemn-topTxt">
                                      <text class="lefticon" >￥</text>
                                     <text class="left-txt">{{item.amount | fixed}}</text>
                                </div>
                                <div class="itemn-botTxt">
                                    <text class="common-txt1">{{item.availableCondition}}</text>
                                </div>

                            </div>
                            <div class="item-middle">
                                <text class="item-txtTop">{{formatName(item.couponName)}}</text>
                                <text class="common-txt item-txtBot">{{item.endTime | filtertime}}有效</text>
                                <div class="itemn-flagWrap">
                                    <div class="itemn-man"  v-if="item.couponType" :style="{'border-color':index==0?'#F99F3B':'#999999'}">
                                        <text class="itemn-txt" v-if="item.couponType==2" :style="{'color':index==0?'#F99F3B':'#999999'}">满减券</text>
                                        <text class="itemn-txt" v-if="item.couponType==1" :style="{'color':index==0?'#F99F3B':'#999999'}">抵扣券</text>
                                    </div>
                                    <div class="itemn-man" v-if="item.newUser" :style="{'border-color':index==0?'#F15B5B':'#999999'}">
                                        <text class="itemn-txt" :style="{'color':index==0?'#F15B5B':'#999999'}">新用户专享</text>
                                    </div>
                                     <div class="itemn-man" v-if="item.bothUse==1" :style="{'border-color':index==0? '#F99F3B':'#999999'}">
                                        <text class="itemn-txt" :style="{'color':index==0?'#F99F3B':'#999999'}">可叠加</text>
                                    </div>
                                </div>
                            </div>
                            <div class="item-right">
                                <div class="item-button"  @click="goHome()"  v-if="tabFlag == 0 ? true : false">
                                    <text class="item-butTxt">立即使用</text>
                                </div>
                            </div>
                           
                
                                <div class="coupon-flag" v-if="tabFlag>0">
                                    <image v-if="tabFlag==1" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/useCoupon.png" class="coupon-flagImg"></image>
                            </div>
                            </div>
                    </div>
                </cell>
                <cell v-if="norecord" class="norecord">
                    <image style="width:298.5px;height:298.5px;" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nocoupon.png"></image>
                    <text style="margin-top:71.7px;font-size: 40px;color: #9E8383;">暂无优惠券</text>
                </cell>
                <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'" v-if="!notLoding">
                    <!-- <loading-indicator class="indicator"></loading-indicator> -->
                    <rotate></rotate>
                </loading>
            </list>
        </wxc-tab-page>
        <loading-big v-if="loadingshow"></loading-big>
         <!-- <wxc-loadingsp 
            :show="loadingshow" 
            type="custom" 
            :need-mask="true" 
            loading-text="加载中..." 
            m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" 
            m-width="200" 
            m-height="200" 
            m-backgroundcolor="#212021" 
            m-textcolor="#ffffff"
        >
        </wxc-loadingsp> -->
    </div>
</template>
<script>
import { WxcTabPage, WxcPanItem, Utils, BindEnv } from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import Config from "@/tab-bar/topconfig";
import WxcLoadingsp from "@/components/modules/loading";
import { serialize, getBaseUrl } from "@/utils/index.js";
import { postResponsesToken } from "@/api.js";
let navigator = weex.requireModule("navigator");
const modal = weex.requireModule("modal");
import rotate from "@/components/modules/rotate";
import loadingBig from "@/components/modules/loading-big";
export default {
    components:{
         WxcTabPage,
         WxcMinibar,
          WxcLoadingsp,
          rotate,
          loadingBig
    },
    data(){
        
        return{
            tabTitles:[{
                title:'待使用',
                type:0
            },{
                title:'已使用',
                type:1
            },{
                title:'已过期',
                type:3  
            }],
        tabPageHeight: 1334,
        tabStyles: Config.tabStyles,
        tabList: [],
        loadingshow: false,
        refreshing: false,
        loadinging: false,
        notLoding:false,
         norecord: false,
        pagesize: 10, // 一页显示多少条
        pageindex: 1, //当前页
        baseURL: "",
        tabFlag:0,//用来标识导航
        bgred:'bgred',
        bggray:'bggray',
        index:0,
        graytxt:'graytxt',
        redtxt:'redtxt',
        itembg:'item-bg',
        itembgh:'item-bgh'

    }
         
    },
    mounted(){
        this.tabPageHeight = Utils.env.getPageHeight();
        this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);

        this.getresposnedata();
        // 获取路径
        this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
    },
    filters:{
        filtertime(time) {
            let date = new Date(+time);
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

            return `${date.getFullYear()}-${formatNum(date.getMonth() + 1)}-${formatNum(date.getDate())} ${formatNum(date.getHours())}:${formatNum(date.getMinutes())}`
        },
        
        fixed(value) {
            return String(value).indexOf('.') ? Number(value).toFixed(2) : value+'.00'
        }
    
    },

    methods:{
        formatName(name){
            let obj=this.strlen(name);
            return obj.len>16 ? name.slice(0,obj.count)+'...':name; 
        },
        strlen(str){
             let obj={
                 len:0,
                 count:0,
             }
            var len = 0;
            for (var i=0; i<str.length; i++) { 
                var c = str.charCodeAt(i); 
                //单字节加1 
                    if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f))    { 
                    obj.len++; 
                    } 
                    else { 
                    obj.len+=2; 
                    } 
                    if(obj.len<=16){
                        obj.count++;
                    }
            } 
            return obj;
        },
        //点击使用到首页
        goHome(){
        
              navigator.push({
                url: this.baseURL + "index.js",
                animated: "true"
            });
        },
        
        //请求优惠券列表页数据
          async getresposnedata(state) {
            // this.loadingshow = true
            this.refreshing = true
       
            let param = {
                page:{
                     size: this.pagesize,//分页大小，一页展示多少条
                     current: this.pageindex//当前页面
                },
                type: this.index//类型0：未使用，1:已使用,2:已过期
            };

            try {
                 
                let res = await postResponsesToken('account/activity/getMyCoupon', param);//发请求

               
                // this.loadingshow = false;

                if (res.data.records.length === 0) {
                    this.norecord = true
                } else {
                    this.norecord = false;
                }

                if (this.pageindex !== 1) this.norecord = false;
                
                
               let demoList = res.data.records;

              
                let key = !!state ? demoList : !Array.isArray(this.tabList[this.index]) ? [] : this.tabList[this.index].concat(demoList);
                this.$set(this.tabList, this.index, key);
              
                this.refreshing = false
                this.loadinging = false
                this.notLoding = demoList.length < this.pagesize 

            } catch (e) {
              
                // this.loadingshow = false
                modal.toast({
                    message:JSON.stringify(e)
                })
            }
        },
           wxcTabPageCurrentTabSelected(e) {
               this.tabFlag=e.page//用来标识角标颜色
             
            this.index = e.page;
            this.norecord=false;
            this.pageindex = 1;
           
           
            this.getresposnedata(true);
        },
        onrefresh(event) {
            this.pageindex = 1
            this.getresposnedata(true)

        },
        onloading(event) {
            if( !!this.notLoding) return 
            this.loadinging = true
            this.pageindex++
            this.getresposnedata()

        },
      
    }
}
</script>
<style scoped>
.refresh {
   
    width: 750px;
    display: flex;
    align-items: center;
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}
.norecord {
    padding-top: 158px;
    padding-left: 225.8px;
    padding-right: 225.8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
}
.item-container {
    width: 750px;
    background-color: rgb(245, 245, 245);
}
    .couponlist-wrap{
        background-color: #F5F5F5;
        position:relative;
      
      
    }
    .coupon-itemWrap{
        
       
         flex-direction: column;
         align-items: center;
    }
    .counpon-item{
        width:686px;
      
        height:184px;
        margin-top:24px;
        flex-direction: row;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .item-left{
        width:240px;
        height:184px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        
      
    }
    .item-bg{
       position:absolute;
       left:0;
       top:0;
         width:240px;
        height:184px;
    }
    .item-bgh{
         background-image: url('https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/couponBgh.png');
    }
    .itemn-topTxt{
        flex-direction: row;
    }
    .item-middle{
        width:300px;
        height:184px;
        padding-left:24px;
        flex-direction: column;
        background-color: #fff;
    }
    .item-right{
        width:146px;
         height:184px;
        justify-content: center;
        background-color: #fff;
    }
    .lefticon{
            font-size: 40px;
            margin-top:10px;
            color:#fff;
    }
    .left-txt{
          font-size: 60px;
          color:#fff;
    }
    .item-txtTop{
        color:#333333;
        font-size:28px;
        margin-top:24px;
        font-weight: bold;
     
       
    }
    .common-txt{
        color:#999999;
        font-size:20px;
        margin-top:10px;
    }
    .common-txt1{
        color:#fff;
        font-size:20px;
        margin-top:10px;
    }
    .item-button{

        background-color: #F99F3B;
      width:125px;
      height:47px;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
        justify-content: center;
        align-items: center;
    }
    .item-butTxt{
        color:#fff;
        font-size:20px;
    }
  
 
   .new-flag{
       width:300px;
       height:30px;
       position:absolute;
      
       right:-150px;
       top:0px;
       
     transform-origin: center center;
        background-color: #E70D0D;
       
   } 
    .new-flagtxt{
        color:#fff;
        font-size:14px;
        text-align: center;
        padding-top:5px;
    }
.new-flagImg{
       width:90px;
       height:78px;
}


.coupon-flag{
     width:104px;
       height:104px;
      
       position:absolute;
       right:12px;
       top:20px;
     
}
.coupon-flagImg{
     width:104px;
     height:104px;
}
.bgred{
    background-color: #E70D0D;
}
.bggray{
background-color: #999999;
}
.graytxt{
    color:#999999;
}
.redtxt{
 color:#E70D0D;

}
.itemn-flagWrap{
    flex-direction: row;
    margin-top:30px;
}
.itemn-man{
  
    padding-left:10px;
    padding-right:10px;
  
    border-style: solid;
    border-width: 1px;
   
    margin-right:10px;
    border-radius: 30px;
    height:30px;
    justify-content: center;
    /* line-height: 24px; */
}
.itemn-txt{
    font-size:16px;
    color:#F99F3B;
    font-weight: bold;
}
.gray{
     filter: grayscale(100%);
     transform: translateZ(0);
}
/* .delay{
    
    background-image: url('https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/delay.png');
}
.olduse{
        background-image: url('https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/olduse.png');

} */
</style>